<!DOCTYPE HTML>

<html>

	<head>

		<title>Naber?</title>

	</head>
	
	<body onload="init()">
	
		<canvas id="canvas" class="canvasStyle" width="1200" height="600" style="border:1px solid blue"></canvas>
		
		<script type="text/javascript">
	 
			canvas = document.getElementById( 'canvas' );
			var context = canvas.getContext( '2d' );
			context.fillStyle = 'darkred';
			context.fillRect( 0, 0, 1200, 600 ); // be sure something is drawing into canvas
	 
			function onMouseMoveOnCanvas( event )
			{
				if ( canvas.drawing )
				{  
					var mouseX = event.layerX
					var mouseY = event.layerY
	 
					if ( canvas.pathBegun == false )
					{
						context.beginPath();
						canvas.pathBegun = true;
					}
					else
					{
						context.lineTo( mouseX, mouseY );
						context.stroke();
					}
				}
			}
	 
			function onMouseClickOnCanvas( event )
			{
				canvas.drawing = !canvas.drawing;
				if ( canvas.drawing ) // reset the path when starting over
				{
					canvas.pathBegun = false;
				}
			}
	 
			function init()
			{
				context.strokeStyle = 'yellow';
				context.lineWidth = 15;
				canvas.addEventListener( 'mousemove', onMouseMoveOnCanvas, false ); 
				canvas.addEventListener( 'mousedown', onMouseClickOnCanvas, false );
				canvas.addEventListener( 'mouseup', onMouseClickOnCanvas, false );
			}
	 
		</script>
		
	</body>
	
</html>